<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
		<!--使用Bootstrap的js插件，必须先调入jQuery-->
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
		<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			h1 {
				color: darkorange;
				font-family: "Al Bayan";
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="container">
				<search-com @updatename="updatename"></search-com>
				<div class="row">
					<table class="table">
						<thead>
						<th scope="col">评论人</th>
						<th scope="col">内容</th>
						<th scope="col">时间</th>
						<th scope="col">操作</th>
						</thead>
						<tbody>
						<tr v-for="item in search(username)" :key="item.currenttime">
							<th scope="row">{{item.username}}</th>
							<td>{{item.text}}</td>
							<td>{{item.currenttime}}</td>
							<td><a href="#">删除</a></td>
						</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<template id="tplcom">
			<div class="row mt-3">
				<div class="form-group row" >
					<label for="username" class="col-4">评论人</label>
					<div class="col-8">
						<input type="text" v-model="searchName" class="form-control" id="username" name="username" />
					</div>
				</div>
				<div class="form-group row ml-3" >
					<label for="text" class="col-4">评论内容</label>
					<div class="col-8">
						<input type="text" class="form-control" id="text" name="text" />
					</div>
				</div>
				<input type="button" class="btn btn-primary" @click="add" value="提交">
			</div>
		</template>

		<script>
			let searchCom = {
				template:"#tplcom",
				data(){
					return {
						searchName:null
					}
				},
				methods: {
					add(){
						this.$emit("updatename",this.searchName)
					}
				}
			}
			var vue = new Vue({
				el:'#app',
				data:{
					msg:'一个聪明的小脑瓜！',
					username:"",
					com_list:[
							{
								username:"wang",
								text:"good！",
								currenttime:"2020/01/01 00:00:00"
							}
					]
				},
				methods:{
					updatename(username){
						this.username = username
					},
					search(searchName){
						var newlist = this.com_list
						if(searchName !== null && searchName !== ""){
							newlist = this.com_list.filter(item => {
								return item.username.indexOf(searchName) != -1
							})
						}
						return newlist
						// this.com_list.forEach(item => {
						// 	//console.log(item)
						// 	//console.log(item.name.indexOf("a"))
						// 	if (item.username.indexOf(searchName) !== -1)
						// 		newlist.push(item)
						// })
						// return newlist
					}
				},
				components:{
					searchCom
				}
			})
		</script>
	</body>
</html>
